<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
</head>
<body>

<h2>同步参数</h2>
<p th:text="'同步类型：'+${configInfo.type}"></p>
<p th:text="'回收站：'+${configInfo.recycle}"></p>
<p th:text="'判重算法：'+${configInfo.arithmetic}"></p>
白名单：
<ul th:each="whitelist : ${configInfo.whitelist}">
    <li th:text="${whitelist}"></li>
</ul>
同步列表：
<ul th:each="directory : ${configInfo.directory}">
    <li th:text="${directory.key}+' ↹ '+${directory.value}"></li>
</ul>
<h2>同步内容</h2>
<ul id="datalist">
</ul>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/sync/test");
    }
    else{
        alert('Not support websocket')
    }
    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };
    //连接成功建立的回调方法
    websocket.onopen = function(event){
        send('{\n' +
            '    "type": "LOCAL",\n' +
            '    "whitelist": [],\n' +
            '    "arithmetic": "MD5",\n' +
            '    "directory": {\n' +
            '        "E:/test/zhu": "E:/test/bei"\n' +
            '    },\n' +
            '    "recycle": "E:/test/recycle/"\n' +
            '}');
    }
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        $("#datalist").prepend("<li>"+innerHTML+"</li>");
    }
    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }
    //发送消息
    function send(message){
        websocket.send(message);
    }
</script>

</body>
</html>